<template>
	<view>
		<hx-navbar title="登录" :back="false" :fixed="true" height="88rpx"></hx-navbar>
		<view class="img-bg tp-trbl0000">
			<!-- <image src="../../static/imgs/other/login-bg.png" mode="aspectFill "></image> -->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="logo tp-pxc tp-br15">
			<image src="../../static/imgs/logo.png" mode=""></image>
		</view>
		<button class="login-btn" open-type='getUserInfo' @getuserinfo='getuserinfo'>登录</button>
		<view class="btn" @click="goHome">暂不登录</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="login_box tp-w690 tp-bgf tp-br12  tp-pd30 tp-bbox">
			<view class="logo log_img  tp-br15">
				<image src="../../static/imgs/logo.png" mode=""></image>
			</view>
			<view class="level_align flex_around tp-fz36" v-if="isLogin">
				<view class="flex-1 tp-h98 center_combo" @click="isPwdLogin = !isPwdLogin"
					:class="{'tp-fw600': isPwdLogin}" :style="{color: isPwdLogin ? '#00B4FF': '#333'}">
					密码登录
				</view>
				<view class="flex-1 tp-h98 center_combo" @click="isPwdLogin = !isPwdLogin"
					:class="{'tp-fw600': !isPwdLogin}" :style="{color: !isPwdLogin ? '#00B4FF': '#333'}">
					验证码登录
				</view>
			</view>
			<view class="tp-h98 center_combo tp-fw600 tp-fz36" v-else>
				注册去嗨鸭
			</view>
			<view class="tp-border1 tp-br12 tp-ptb0lr20 level_align tp-h98 tp-mt80">
				<image class="phone_img" src="../../static/imgs/icons/phone-icon.png" mode=""></image> <text
					class="line"></text>
				<input class="flex-1" placeholder="请输入手机号" type="number" maxlength="11" v-model="phone" value="" />
			</view>

			<!-- 验证码S -->
			<view class="ipt-item tp-br12 tp-mb20 tp-bgf tp-h98 tp-ptb0lr20 tp-fxc tp-border1 tp-mt30"
				v-if="!isPwdLogin || !isLogin">
				<view class="icon">
					<image src="../../static/imgs/icons/code-icon.png" mode=""></image>
				</view>
				<view class="input">
					<input type="text" v-model="code" maxlength="6" placeholder="请输入验证码" />
				</view>
				<view v-if="!time" class="getcodebtn tp-pyc" @click="getCode">获取验证码</view>
				<view v-else class="getcodebtn tp-pyc">{{time}}</view>
			</view>
			<!-- 验证码E -->

			<!-- 密码 S -->
			<view class="tp-border1 tp-br12 tp-ptb0lr20 level_align tp-h98 tp-mt30" v-if="isPwdLogin || !isLogin">
				<image class="phone_img" src="../../static/imgs/icons/lock-icon.png" mode=""></image> <text
					class="line"></text>
				<input class="flex-1" placeholder="请输入密码" v-model="pwd" type="password" value="" />
			</view>
			<!-- 密码 E -->

			<view @click="login" v-if="isLogin"
				class="tp-h98 center_combo  tp-br12 tp-fcF tp-fz30 tp-fw600 tp-mt30 login_bg yh-ls4">
				登录
			</view>

			<view @click="register" v-if="!isLogin"
				class="tp-h98 center_combo  tp-br12 tp-fcF tp-fz30 tp-fw600 tp-mt30 login_bg yh-ls4">
				注册
			</view>

			<view class="tp-h98 flex flex_between tp-ptb0lr20 tp-mt30">
				<text v-if="isLogin" @click="pageJumps('/pagesUser/forgetPwd')">忘记密码？</text>
				<text v-else @click="lookText">注册即同意 <text class="tp-fc">《注册服务条款》</text></text>
				<text @click="isLogin = !isLogin">{{isLogin?'立即注册': '立即登录'}}</text>
			</view>
		</view>
		<Notice ref="notice" :noticeInfo="noticeInfo" :isbtn="true"></Notice>
		<!-- #endif -->
	</view>
</template>


<script>
	import Notice from '@/components/common/notice.vue'
	export default {
		components: {
			Notice
		},
		data() {
			return {
				user: 'new', // 新用户
				phone: '', // 手机号
				pwd: '', // 密码
				code: '', // 验证码
				time: 0, // 倒计时
				timer: null, // 倒计时定时器
				isPwdLogin: true, // 是否是账号密码登录
				isLogin: true, // 是登录还是注册
				pageType: 2, // 验证码状态
				noticeInfo: { // 注册条款 
					textTitle: '注册服务条款',
					context: '等后台接口',
				},
			};
		},

		onLoad(opt) {
			if (opt.user) {
				this.user = opt.user
			}
		},
		watch: {
			time(val) {
				if (val <= 0) {
					this.time = 0
					clearInterval(this.timer)
				}
			},
			isLogin() {
				if (this.isLogin && !this.isPwdLogin) { // 登录  验证码登录 2
					this.pageType = 2
				} else if (!this.isLogin) { // 注册  0
					this.pageType = 0
				}
			}
		},
		methods: {
			// 查看服务条款
			lookText() {
				this.$refs.notice.show()
			},
			// 注册
			register() {
				if (!this.phone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
				}
				if (!this.code) {
					return uni.showToast({
						icon: 'none',
						title: '请输入验证码'
					});
				}
				if (!this.pwd) {
					return uni.showToast({
						icon: 'none',
						title: '请输入密码'
					});
				}
				this.$http.get(this.$api.register, {
					pwd: this.pwd,
					verify: this.code,
					phone: this.phone,
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '注册成功'
						})
						this.isLogin = true
						this.isPwdLogin = false
					}
				})
			},
			// 登录
			login() {
				if (!this.phone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
				}
				if (this.isPwdLogin) {
					if (!this.pwd) {
						return uni.showToast({
							icon: 'none',
							title: '请输入密码'
						});
					}
					this.$http.get(this.$api.pwdLogin, {
						pwd: this.pwd,
						phone: this.phone
					}).then(res => {
						if (res.code == 200) {
							this.$store.commit('upToken', res.data.token)
							uni.showToast({
								icon: 'none',
								title: '登录成功'
							})
							uni.navigateBack({
								delta: 1
							})
						}
					})
				} else {
					if (!this.code) {
						return uni.showToast({
							icon: 'none',
							title: '请输入验证码'
						});
					}
					this.$http.get(this.$api.codeLogin, {
						verify: this.code,
						phone: this.phone
					}).then(res => {
						if (res.code == 200) {
							this.$store.commit('upToken', res.data.token)
							uni.showToast({
								icon: 'none',
								title: '登录成功'
							})
							uni.navigateBack({
								delta: 1
							})
						}
					})
				}

			},
			getCode() { // 通过手机号获取验证码
				if (!this.phone) {
					return uni.showToast({
						icon: 'none',
						title: '请输入手机号'
					});
				}
				// 0.注册, 1.修改密码, 2.登录 6.绑定手机号
				this.$http.get(this.$api.sendMsg, {
					type: this.pageType,
					phone: this.phone
				}).then(res => {
					if (res.code == 200) {
						this.time = 59
						this.timer = setInterval(() => {
							this.time--
						}, 1000)
						uni.showToast({
							icon: 'none',
							title: res.msg
						})
					}
				})
			},
			getuserinfo(e) {
				// console.log('e', e);
				uni.login({
					provider: 'weixin',
					success: ({
						code
					}) => {
						// console.log('code', code); // 打印code
						/* -----------------------------本地登录测试 S------------------------------- */
						// let updata = {
						// 	"session_key": "11",
						// 	"openid": "11",
						// 	"nickname": "睡醒揉揉眼",
						// 	"avatarUrl": "http://pic4.zhimg.com/50/v2-db9134864af91d5d5d1aee75b0371a74_hd.jpg",
						// 	"gender": "1"
						// }
						// this.$http.post(this.$api.login, updata).then(res => { // 模拟登录
						// 	if (res.code === 200) {
						// 		this.$store.commit('upToken', res.data.rdSessionKey)
						// 		uni.switchTab({
						// 			url: '../tabbar/home'
						// 		});
						// 	}
						// })
						// return
						/* -----------------------------本地登录测试 E------------------------------- */
						this.$http.get(this.$api.getOpenid + code).then(async res => {
							if (res.code === 200) {
								this.$store.commit('upToken', res.data.rdSessionKey)
								await this.getcustomerInfo()
								// this.$http.get(this.$api.isBindPhone).then(res => {
								// 	if (res.code == 200) {

								// 	} else if (res.code == 2028) {
								// 		uni.navigateTo({
								// 			url: '../../pagesUser/bindPhone'
								// 		})
								// 	}
								// })
								// return

								// uni.switchTab({
								// 	url: '../tabbar/home'
								// });
								uni.navigateBack({
									delta: 1
								})
							} else if (res.code === 2002) {
								let openId = res.msg
								let userInfo = e.detail.userInfo
								let inviteCode = this.$store.getters.getInviteCode
								// let updata = {
								// 	openId,
								// 	// session_key: openData.session_key,
								// 	nickname: userInfo.nickName,
								// 	avatarUrl: userInfo.avatarUrl,
								// 	gender: userInfo.gender,
								// 	inviteCode: inviteCode
								// }
								let updata = {}
								uni.showModal({
									title: '温馨提示',
									content: '正在请求您的个人信息',
									success: res => {
										if (res.confirm) {
											if (uni.getUserProfile) {
												wx.getUserProfile({
													desc: "获取你的昵称、头像、地区及性别",
													success: res => {
														console.log(res)
														let userInfo = res
															.userInfo;
														updata = {
															openId,
															// session_key: openData.session_key,
															nickname: userInfo
																.nickName,
															avatarUrl: userInfo
																.avatarUrl,
															gender: userInfo
																.gender,
															inviteCode: inviteCode
														}
														this.loginAppFn(
															updata)
													},
													fail: res => {
														//拒绝授权
														uni.showToast({
															title: '您拒绝了请求'
														})
														return;
													},
												})
											} else {
												updata = {
													openId,
													// session_key: openData.session_key,
													nickname: userInfo.nickName,
													avatarUrl: userInfo.avatarUrl,
													gender: userInfo.gender,
													inviteCode: inviteCode
												}
												this.loginAppFn(updata)
											}
										}
									}
								})
							}
						})
					}
				})
			},
			// 调用注册用户的登录接口
			loginAppFn(updata) {
				this.$http.post(
						this.$api
						.loginApp,
						updata)
					.then(async res => {
						if (res
							.code ===
							200
						) {
							this.$store
								.commit(
									'upToken',
									res
									.data
									.rdSessionKey
								)
							await this
								.getcustomerInfo()
							this.$http
								.get(
									this
									.$api
									.isBindPhone
								)
								.then(
									res => {
										if (res
											.code ==
											200
										) {
											// this.$store.commit('delInviteCode')
											this.getcustomerInfo()
											// uni.switchTab({
											// 	url: '../tabbar/home'
											// });
											uni.navigateBack({
												delta: 1
											})
										}
									}
								)
						}
					})
			},

			goHome() {
				// uni.switchTab({ // 授权成功后 返回到来之前的h5页面
				// 	url: '/pages/tabbar/home'
				// })
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.logo {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		top: 254rpx;
	}

	.login-btn {
		width: 400rpx;
		height: 88rpx;
		border-radius: 40rpx;
		color: #fff;
		font-size: 32rpx;
		background-color: $blue;
		margin-top: 140rpx;
		position: absolute;
		bottom: 150rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;

		&::after {
			border: none;
		}
	}

	.btn {
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 40rpx;
		text-align: center;
		color: #fff;
		font-size: 32rpx;
		background-color: #ccc;
		margin-top: 140rpx;
		position: absolute;
		bottom: 50rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 2;
	}

	.login_box {
		position: relative;
		top: 60vh;

		// left: 50%;
		transform: translateY(-50%);

		.log_img {
			position: absolute;
			top: -260rpx;
			left: 50%;
			transform: translateX(-50%);
		}

		.login_bg {
			background: linear-gradient(90deg,
					rgba(0, 180, 255, 1),
					rgba(16, 218, 255, 1));
		}

		.phone_img {
			width: 48rpx;
			height: 48rpx;
			margin: 0 20rpx;
		}

		.ipt-item {
			// width: 690rpx;
			font-size: 30rpx;
			position: relative;

			.icon {
				width: 48rpx;
				height: 48rpx;
				margin: 0 20rpx;
			}

			.input {
				flex: 1;
				padding: 0 120rpx 0 0;
			}

			.getcodebtn {
				right: 20rpx;
				padding: 6rpx 10rpx;
				min-width: 160rpx;
				text-align: center;
				border: 1px solid $blue;
				color: $blue;
				z-index: 3;
				border-radius: 8rpx;
			}
		}
	}
</style>
